<template>
    <ph-td :class="cns">
        <icon v-if="action.view" @click.stop="onView(row)" title="详情" :hover="true" icon="eye"></icon>
        <icon v-if="action.edit" @click.stop="onEdit(row)" title="编辑" :hover="true" icon="pencil"></icon>
        <icon v-if="action.del" @click.stop="onDel(row)" title="删除" :hover="true" icon="trash" type="danger"></icon>
    </ph-td>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType } from 'vue'
import Icon from 'ph-icon'
import PhTd from './td.vue'
import {RowAction} from './struct'
export default defineComponent({
    components:{Icon,PhTd},
    props:{
        row:{
            type:Object as PropType<Record<string,unknown>>,
            default:()=>({})
        },
        action:{
            type:Object as PropType<RowAction>,
            default:()=>({})
        },
    },
    setup() {
        const onView = inject<(row:Record<string,unknown>)=>void>("tbRowView")
        const onEdit = inject<(row:Record<string,unknown>)=>void>("tbRowEdit")
        const onDel = inject<(row:Record<string,unknown>)=>void>("tbRowDel")
        const cns = computed(()=>{
            return {
                'ph-td-action':true
            }
        })
        return {cns,onView,onEdit,onDel}
    },
})
</script>
<style lang="scss" scoped>
.ph-td-action{
    .ph-icon{
        line-height: normal;
        margin: 0 var(--ph-5);
        opacity: .6;
        &:hover{
            opacity: 1;
        }
    }
}
</style>
